<template>
	<view class="content">
		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" -->
			<!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
			<template #top>
				<view class="news-info">
					<navbar backIconName="arrow-left" title="执法人员" :titleStyle="titleStyle"></navbar>
					<view :style="{height:statusHeight+'px'}"></view>
					<view style="padding: 12rpx 20rpx;background-color: #fff;">
						<u-search placeholder="执法人员姓名/身份证号/执法证件号" shape="square" height="70rpx" v-model="keyWords" :showAction='true'
							@custom="search"></u-search>
					</view>
				</view>
			</template>

			<!-- 自定义下拉刷新view(如果use-custom-refresher为true且不设置下面的slot="refresher"，此时不用获取refresherStatus，会自动使用z-paging自带的下拉刷新view) -->

			<!-- 注意注意注意！！字节跳动小程序中自定义下拉刷新不支持slot-scope，将导致custom-refresher无法显示 -->
			<!-- 如果是字节跳动小程序，请参照sticky-demo.vue中的写法，此处使用slot-scope是为了减少data中无关变量声明，降低依赖 -->
			<template #refresher="{refresherStatus}">
				<!-- 此处的custom-refresh为demo中自定义的组件，非z-paging的内置组件，请在实际项目中自行创建。这里插入什么view，下拉刷新就显示什么view -->
				<custom-refresher :status="refresherStatus" />
			</template>
			<!-- 自定义没有更多数据view -->
			<template #loadingMoreNoMore>
				<!-- 此处的custom-nomore为demo中自定义的组件，非z-paging的内置组件，请在实际项目中自行创建。这里插入什么view，没有更多数据就显示什么view -->
				<custom-nomore />
			</template>

			<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
			<view class="news-item" v-for="(item,index) in dataList" :key="index" @click="itemClick(item)">
				<view class="staff-card">
					<view class="left">
						<view class="top">
							<text style="font-size: 26rpx;color: #666;">人员姓名：</text>
							<text
								style="font-size: 26rpx;color: #323232;margin-right: 20rpx;">{{item.name || '-'}}
							</text>
						</view>
						<view class="top">
							<text style="font-size: 26rpx;color: #666;">身份证号：</text>
							<text
								style="font-size: 26rpx;color: #323232;margin-right: 20rpx;">{{item.idCard || '-'}}
							</text>
						</view>
						<view class="top">
							<text style="font-size: 26rpx;color: #666;">执法证号：</text>
							<text
								style="font-size: 26rpx;color: #323232;margin-right: 20rpx;">{{item.lawEnforcementCertificateNumber || '-'}}
							</text>
						</view>
						<view class="bottom">
							<text style="font-size: 26rpx;color: #666;">工作单位：</text>
							<text style="font-size: 26rpx;color: #323232;">{{item.unit || '-'}}</text>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>

</template>

<script>
	let App = getApp();
	import {
		getOfficialsList,
	} from '@/api/pagesMall'
	import store from '@/store'
	export default {
		components: {},
		data() {
			return {
				keyWords: "",
				dataList: [],
				statusHeight: 44 + App.globalData.statusBarHeight,
				titleStyle: {
					color: "#ffffff",
					fontWeight: "bold",
					fontSize: "18px"
				},
				userId: store.state.user.USER_OPENID,
				currentCompanyInfo: store.state.user.COMPANY_INFO,
			};
		},
		onLoad(options) {
           console.log(options,'---------------------')
		},
		methods: {
			search() {
				this.$refs.paging.reload();
			},
			queryList(pageNo, pageSize) {
				const params = {
					pageNum: pageNo,
					pageSize: pageSize,
					paramName: this.keyWords,
				}
				getOfficialsList(params).then(res => {
					this.$refs.paging.complete(res.data);
				}).catch(res => {
					this.$refs.paging.complete(false);
				})
			},
			itemClick(row) {
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2]; //上一个页面
				let subList = row.subItemList || []
				prevPage.$vm.getParamsLawYar(JSON.parse(JSON.stringify(row))); //重点$vm
				uni.navigateBack();
			},
		}
	};
</script>

<style lang="scss" scoped>
	.news-item {
		display: flex;
		flex-direction: column;

		.staff-card {
			display: flex;
			align-items: center;
			padding: 20rpx;
			margin: 10rpx 20rpx;
			background-color: #fff;
			border-radius: 12rpx;
			box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15);

			.left {
				flex: 1;
				display: flex;
				flex-direction: column;

				.top {
					margin-bottom: 20rpx;
				}

				.bottom {
					display: flex;
					align-items: center;

					.status {
						font-size: 24rpx;
						color: #fff;
						padding: 4rpx 10rpx;
						border-radius: 6rpx;
						background-color: #4F79DC;
					}
				}
			}
		}
	}
</style>